<template>
  <div class="h100 city">
    <h4>自动定位</h4>
    <div class="box">
      <p class="city_name">{{ cityInfo.CityName }}</p>
    </div>
    <h4>省份</h4>
    <div class="box">
      <p
        class="city_name"
        @click="changeCityId(item.CityID)"
        v-for="item in province"
        :key="item.CityID"
      >
        {{ item.CityName }}
        <span>&gt;</span>
      </p>
    </div>
    <transition name="move">
      <div v-if="mask" class="city2">
        <div @click="mask = false" class="mask"></div>
        <div class="list">
          <p
            @click="changeCityName(item.CityName)"
            v-for="item in cities"
            :key="item.CityID"
            class="city_name"
          >
            {{ item.CityName }}
            <span>&gt;</span>
          </p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { getAllCity } from "@/api/carList";
export default {
  props: ["cityInfo"],
  data() {
    return {
      province: [],
      cities: [],
      mask: false,
    };
  },
  methods: {
    async changeCityId(id) {
      let res = await getAllCity({ provinceid: id });
      this.cities = res;
      this.mask = true;
    },
    changeCityName(name) {
      this.$emit("sendCityName", {
        cityFlag: false,
        name,
      });
      setTimeout(() => {
        this.mask = false;
      },100);
    },
  },
  async created() {
    let res = await getAllCity();
    this.province = res;
  },
};
</script>

<style lang="scss" scoped>
.city {
  position: fixed;
  width: 100%;
  top: 0;
  overflow-y: scroll;
  background: #fff;
}
.city2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
h4 {
  padding: 0 8px;
  height: 25px;
  line-height: 25px;
  font-weight: 500;
  font-size: 12px;
  color: #999;
  background: #f4f4f4;
}
.box {
  padding: 0 15px;
  p {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 20px;
    }
  }
}
.city_name {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #000;
}
.city_name:last-of-type {
  border-bottom: none;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.list {
  position: fixed;
  overflow: scroll;
  padding: 0 15px;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: #fff;
  p {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 20px;
    }
  }
}
</style>
